<!-- D:/project/en2_haiou/haiou-en2-pc/static/images/ycwz -->
<template>
  <div class="pagebody">
    <Header />
    <div class="banner">
      <div class="container">
        <div class="bannerpad">
          <div class="bantitle">
            See Top Chinese And Japanese Doctors From Home
          </div>
          <div class="bantxt">
            Trusted cross-border telemedicine services, brought to you by Seagull Medical
          </div>
        </div>
      </div>
    </div>

    <div class="thingbox">
      <div class="container">
        <div class="title">Why Choose Remote Consultation?<br>
          Expanded Treatment Options for Your Care</div>
        <div class="introduce">
          For complex medical conditions or treatment challenges, Remote Consultation connects you to world-class
          medical teams without long-distance travel. Whether seeking a more authoritative second opinion, exploring
          treatment options, or arranging cross-border care, Remote Consultation reduces misdiagnosis risks, optimizes
          treatment strategies, provides actionable advice, and helps you seize the optimal treatment time.
        </div>
        <div class="imgbox justify-between">
          <img src="@/static/images/ycwz/imgbox.png"
               alt="">
          <div class="imgtxt">
            For patients with complex and critical illnesses, seeking cutting-edge treatments or second opinions is
            crucial. Remote Consultation consultations allow you to receive accurate diagnoses and tailored treatment
            plans from top Chinese or Japanese experts without leaving home, and even evaluate the need for overseas
            medical treatment, ensuring access to higher-quality care.
          </div>
        </div>
      </div>
    </div>

    <div class="process">
      <div class="container">
        <div class="title">Seagull Medical Remote Consultation Service Procedure<br>
          Streamlined Process, Efficient Consultations.
        </div>
        <div class="introduce">
          Seagull Medical's Remote Consultation Service focuses on a streamlined workflow, delivering an efficient and
          convenient Remote Consultation Service experience. Dedicated full-process specialist support, from booking
          to receiving reports, truly delivers the new experience of "seeing world-class doctors from the comfort of
          home."
        </div>
        <div class=" mt16">
          <div v-for="(item, index) in processlist"
               :key="index"
               class="processitem">
            <div class="item_no">
              <span class="no">{{ index + 1 }}</span>{{ item.title }}
            </div>
            <div class="item_txt">{{ item.txt }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="groups">
      <div class="container">
        <div class="title">Which Patients Need Remote Consultation?<br>
          4 Ideal Candidate Groups
        </div>
        <div class="groupslist justify-between">
          <div class="groups_item"
               v-for="(item, index) in groupslist"
               :key="index">
            <div class="groups_top justify-center align-center">NO.{{ index + 1 }}</div>
            <div class="groups_bot">
              <div class="item_title align-center">
                {{ item.title }}
              </div>
              <div class="item_text">
                {{ item.txt }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="choose borderbox">
      <div class="container">
        <div class="title">Choosing Between Japanese and Chinese Experts<br>
          Speed/Convenience or Thoroughness/Accuracy
        </div>
        <div class="choosebox justify-between">
          <div class="left">
            <div class="top justify-center align-center">Chinese Remote Consultation</div>
            <div class="bot borderbox">
              <div class="botli pos-rel">
                <div class="pos-abs botno justify-center align-center">1</div>
                Rapid 24- to 48-hour appointments with emergency priority
              </div>
              <div class="botli pos-rel">
                <div class="pos-abs botno justify-center align-center">2</div>
                Affordable pricing for universal healthcare access
              </div>
              <div class="botli pos-rel">
                <div class="pos-abs botno justify-center align-center">3</div>
                Top-tier hospital specialists covering over 100 specialized fields
              </div>
              <div class="botli pos-rel">
                <div class="pos-abs botno justify-center align-center">4</div>
                Translation support available in Mandarin, English, and Southeast Asian languages
              </div>
            </div>
          </div>
          <div class="right">
            <div class="top justify-center align-center">Japanese Remote Consultations</div>
            <div class="bot borderbox">
              <div class="botli pos-rel">
                <div class="pos-abs botno justify-center align-center">1</div>
                World-leading early cancer screening accuracy
              </div>
              <div class="botli pos-rel">
                <div class="pos-abs botno justify-center align-center">2</div>
                Direct access to interpretation of latest generation PET-CT and other cutting-edge diagnostic reports
              </div>
              <div class="botli pos-rel">
                <div class="pos-abs botno justify-center align-center">3</div>
                Specialized in anti-aging, precision physical exams, and secondary cancer prevention
              </div>
              <div class="botli pos-rel">
                <div class="pos-abs botno justify-center align-center">4</div>
                Comprehensive 10+ years health management records
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fourimg">
      <div class="container">
        <div class="title">Seagull Medical One-Stop Remote Consultation Service<br>
          4 Advantages for Worry-Free Medical Consultations
        </div>
        <div class="introduce">
          Seagull Medical provides professional and convenient remote consultations services, pooling international
          top-tier medical resources to pair you with ideal specialists.From online consultation and collation of
          medical records to treatment plan development, our dedicated advisor service supports you every step of the
          way, ensuring worry-free medical consultations.
        </div>
        <div class="fourbox justify-start flex-wrap">
          <div class="fouritem">
            <img src="@/static/images/ycwz/one.png"
                 alt="">
          </div>
          <div class="fouritem align-center justify-center flex-col">
            <div class="four_title">
              Chinese - Japanese Expert Collaboration
            </div>
            <div class="four_txt">
              Connect directly to Sino-Japanese top medical professionals for authoritative treatment plans.
            </div>
          </div>
          <div class="fouritem">
            <img src="@/static/images/ycwz/two.png"
                 alt="">
          </div>
          <div class="fouritem align-center justify-center flex-col">
            <div class="four_title">
              Tailored solutions save you effort
            </div>
            <div class="four_txt">
              Personalized medical advisors intelligently match optimal specialist resources based on patient
              conditions.
            </div>
          </div>
          <div class="fouritem align-center justify-center flex-col">
            <div class="four_title">
              Full Process Professional Guidance
            </div>
            <div class="four_txt">
              From medical record translation, consultation arrangement to follow-up care, we offer full-cycle services.
            </div>
          </div>
          <div class="fouritem">
            <img src="@/static/images/ycwz/three.png"
                 alt="">
          </div>
          <div class="fouritem align-center justify-center flex-col">
            <div class="four_title">
              Smart Overseas Medical Link
            </div>
            <div class="four_txt">
              Based on consultation findings, directly connect to international treatment expedited access.
            </div>
          </div>
          <div class="fouritem">
            <img src="@/static/images/ycwz/four.png"
                 alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="application">
      <div class="container">
        <div class="title">Seagull Medical Remote Consultation<br>
          Quick Application Channel
        </div>
        <div class="introduce">
          Seagull Medical's remote consultation services leverage internet technology to create efficient online
          application channels, making high-quality medical resources accessible with a single click. Patients can
          quickly submit medical records via the following methods, and dedicated medical advisors will review and
          respond within 24 business hours.
        </div>
        <div class="applicationbox">
          <div class=" topbtn justify-between">
            <div @click="ischi = 1"
                 class="csp btn justify-center align-center"
                 :class="ischi == 1 ? 'choosebtn' : ''">
              Chinese Remote Consultation
            </div>
            <div @click="ischi = 0"
                 class="csp btn justify-center align-center"
                 :class="ischi == 0 ? 'choosebtn' : ''">
              Japanese Remote Consultations
            </div>
          </div>
          <div class="appform borderbox flex-row">
            <div class="form_left borderbox">
              <div class=" flex-row align-center mb16">
                <div class="label">Name</div>
                <input placeholder="Please enter your name."
                       v-model="form.name"
                       type="text">
              </div>
              <div class=" flex-row align-center mb16">
                <div class="label">Contact<span>*</span>
                  Information</div>
                <input placeholder="Please enter your additional contact details."
                       v-model="form.tel"
                       type="text">
              </div>
              <div class=" flex-row align-start mb16">
                <div class="label">Problem Description</div>
                <!-- <input placeholder="Please enter your additional contact details." type="text"> -->
                <textarea class="problem"
                          placeholder="Please describe your requirements."
                          name=""
                          v-model="form.content"
                          id=""></textarea>
              </div>
              <div class=" justify-end">
                <div class="submitbtn align-center justify-center csp"
                     @click="submit">Leave a comment</div>
              </div>
            </div>

            <div class="form_right">
              <div class="form_title">
                Seagull Medical Reminder:
              </div>
              <div class="form_txt mt30">
                1.Please ensure accurate contact details and keep your phone/communication channels accessible for
                timely follow-up.
              </div>
              <div class="form_txt mt15">
                2.We appreciate your patience as response times may vary during peak inquiry periods.
              </div>
              <div class="form_txt mt15">
                3.Your personal information is strictly safeguarded under our privacy commitment.
              </div>
              <div class="form_txt mt15">
                4.You can send your requirements to email XXXX@xxxx
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <Footer />

  </div>
</template>

<script>
import { addLeaveWord } from '@/api/api'
export default {
  name: 'ycwz',
  components: {
  },

  head () {
    return {
      // tdk设置
      title: "",
    };
  },
  async asyncData ({ app, isDev, route, store, env, params, query, req, res, redirect, error }) {
    return {
    }
  },
  data () {
    return {
      ischi: 1,
      processlist: [
        {
          title: 'Application Review',
          txt: 'After submitting their application and medical records online, a dedicated medical advisor will review and respond within 24 hours.'
        },
        {
          title: 'Expert Matching',
          txt: 'Specialized medical advisors will assess patient eligibility for consultations based on their condition, connect them with relevant specialists, and notify the specific scheduling time.'
        },
        {
          title: 'Remote Consultation',
          txt: 'Your dedicated medical consultant will compile and submit your medical records to our expert panel for review. Our specialists will conduct a detailed online consultation, addressing all your questions. Following the session, you will receive a fully translated comprehensive diagnostic report.'
        },
        {
          title: 'Follow-up Care',
          txt: 'Establish patient follow-up records to regularly track treatment efficacy; provide ongoing support for treatment-related queries.'
        },
      ],
      groupslist: [
        {
          title: 'Patients with rare and complex conditions',
          txt: 'Patients requiring consultation with internationally renowned experts or a second opinion for more precise diagnosis and treatment plans'
        },
        {
          title: 'Patients experiencing treatment plateaus',
          txt: 'Patients with suboptimal treatment outcomes seeking to explore cutting-edge international therapies or alternative solutions.'
        },
        {
          title: 'Patients undergoing long-term follow-up management',
          txt: 'Patients needing professional guidance for chronic illnesses or post-operative care while seeking to avoid  frequent hospital visit.'
        },
        {
          title: 'Patients in regions with limited medical resources',
          txt: 'Patients with limited local healthcare access urgently needing quality medical resources'
        },
      ],
      form: {
        type: '02',
        lyType: "05",
        name: "",
        tel: "",
        content: ""
      }

    }
  },
  methods: {
    submit () {
      if (this.form.name == "" || this.form.tel == "") {
        this.$message({
          showClose: true,
          message: 'Please fill in your name and email',
          type: 'warning'
        });
        return
      } else {
        this.$axios.post(addLeaveWord, this.form).then(res => {
          this.$notify({
            title: 'tip',
            message: res.msg,
          });
        })

      }
    }
  }

}
</script>

<style lang="scss" scoped>
.title {
  font-family: Arial, Arial;
  font-weight: 900;
  font-size: 32px;
  color: #2e343e;
  text-align: left;
}

//使用伪类添加title边框
.title::after {
  content: "";
  width: 140px;
  height: 23px;
  display: block;
  border-bottom: 6px solid #0041a3;
}

.introduce {
  margin-top: 24px;
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 18px;
  color: #616469;
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.pagebody {
  .banner {
    height: 480px;
    background: url(../static/images/ycwz/banner.png) no-repeat;
    background-size: cover;

    .bannerpad {
      padding: 100px 10px;

      .bantitle {
        width: 553px;
        font-family: Arial, Arial;
        font-weight: 900;
        font-size: 32px;
        color: #2e343e;
        text-align: left;
        margin-bottom: 24px;
      }

      .bantxt {
        width: 553px;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 18px;
        color: #616469;
        line-height: 32px;
        text-align: left;
      }
    }
  }

  .thingbox {
    background: #fff;
    padding: 68px 0 109px;

    .imgbox {
      margin-top: 32px;
      height: 333px;
      background: #f5f8fd;

      img {
        width: 500px;
      }

      .imgtxt {
        padding: 58px 54px 58px 40px;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 18px;
        color: #2e343e;
        line-height: 36px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .process {
    padding: 80px 0;
    background: #f5f8fd;

    .processitem {
      margin-top: 32px;
      padding-bottom: 32px;
      border-bottom: 1px solid #e4e9f3;

      .item_no {
        background: #e5f1ff;
        border-radius: 0px 50px 50px 0px;
        width: max-content;
        padding: 16px 24px 16px 16px;
        font-weight: bold;
        font-size: 24px;
        color: #2e343e;
        line-height: 24px;
        text-align: left;

        .no {
          font-family: Arial, Arial;
          font-weight: 900;
          font-size: 24px;
          color: #0078ff;
          margin-right: 16px;
        }
      }

      .item_txt {
        margin-top: 22px;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 18px;
        color: #2e343e;
        line-height: 32px;
        text-align: left;
        padding-left: 50px;
      }
    }
  }

  .groups {
    background: #fff;
    padding: 109px 0 91px;

    .groupslist {
      margin-top: 48px;

      .groups_item {
        width: 282px;
        height: 490px;

        .groups_top {
          font-weight: 900;
          font-size: 24px;
          color: #ffffff;
          height: 52px;
          background: linear-gradient(
            135deg,
            #dddafd 0%,
            #5f6bf6 51%,
            #0041a3 95%
          );
          border-radius: 24px 24px 0px 0px;
        }

        .groups_bot {
          height: 438px;
          background: linear-gradient(
            180deg,
            #e8efff 0%,
            rgba(232, 239, 255, 0.3) 100%
          );
          border-radius: 0px 0px 24px 24px;
          padding: 0px 24px 24px;

          .item_title {
            height: 174px;
            border-bottom: 1px solid #dfe7fa;
            font-weight: 900;
            font-size: 24px;
            color: #0041a3;
            text-align: left;
          }

          .item_text {
            margin-top: 24px;
            font-family: Arial, Arial;
            font-weight: 400;
            font-size: 18px;
            color: #2e343e;
            line-height: 36px;
            text-align: left;
          }
        }
      }
    }
  }

  .choose {
    padding: 94px 0 117px;
    height: 1097px;
    background: url(../static/images/ycwz/leftrightbg.png) no-repeat;
    background-size: contain;

    .choosebox {
      margin-top: 80px;

      .left {
        width: 576px;

        .top {
          height: 96px;
          background: #e67311;
          border-radius: 24px 24px 0px 0px;
          font-family: Arial, Arial;
          font-weight: 900;
          font-size: 28px;
          color: #ffffff;
          line-height: 48px;
        }

        .bot {
          height: 600px;
          background: rgba(244, 104, 3, 0.05);
          border-radius: 0px 0px 24px 24px;
          padding: 48px;

          .botli {
            font-family: Arial, Arial;
            font-weight: 400;
            font-size: 20px;
            color: #3c3835;
            line-height: 48px;
            text-align: left;
            padding: 0 0 48px 24px;
            border-left: 1px dashed #e97c20;

            .botno {
              left: -12px;
              top: 12px;
              width: 23px;
              height: 23px;
              border-radius: 50%;
              background: #e97c20;
              font-weight: bold;
              font-size: 17px;
              color: #ffffff;
            }
          }
        }
      }

      .right {
        width: 576px;

        .top {
          height: 96px;
          background: #014a9f;
          border-radius: 24px 24px 0px 0px;
          font-family: Arial, Arial;
          font-weight: 900;
          font-size: 28px;
          color: #ffffff;
          line-height: 48px;
        }

        .bot {
          height: 600px;
          background: rgba(14, 100, 199, 0.05);
          border-radius: 0px 0px 24px 24px;
          padding: 48px;

          .botli {
            font-family: Arial, Arial;
            font-weight: 400;
            font-size: 20px;
            color: #3c3835;
            line-height: 48px;
            text-align: left;
            padding: 0 0 48px 24px;
            border-left: 1px dashed #014a9f;

            .botno {
              left: -12px;
              top: 12px;
              width: 23px;
              height: 23px;
              border-radius: 50%;
              background: #014a9f;
              font-weight: bold;
              font-size: 17px;
              color: #ffffff;
            }
          }
        }
      }
    }
  }

  .fourimg {
    background: #fff;
    padding: 162px 0 102px;

    .fourbox {
      margin-top: 24px;
      height: 600px;
      background: #f5f8fd;

      .fouritem {
        width: 300px;
        height: 300px;

        img {
          width: 300px;
        }

        .four_title {
          padding: 0 24px;
          font-weight: bold;
          font-size: 18px;
          color: #2e343e;
          line-height: 32px;
        }

        .four_txt {
          padding: 0 24px;
          font-size: 16px;
          color: #2e343e;
          line-height: 32px;
        }
      }
    }
  }

  .application {
    background: #f5f8fd;
    padding: 80px 0;

    .applicationbox {
      margin-top: 40px;
      height: 553px;
      background: linear-gradient(
        180deg,
        #e8efff 0%,
        rgba(232, 239, 255, 0.3) 100%
      );
      border-radius: 32px 32px 32px 32px;

      .topbtn {
        padding: 40px 48px 32px;

        .choosebtn {
          background: #0078ff !important;
          color: #ffffff !important;
        }

        .btn {
          width: 518px;
          height: 72px;
          background: #fff;
          border-radius: 72px 72px 72px 72px;
          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 24px;
          color: #2e343e;
          line-height: 24px;
        }
      }

      .appform {
        padding-bottom: 33px;
        height: 409px;
        background: linear-gradient(
          180deg,
          #d9e5ff 0%,
          rgba(232, 239, 255, 0.5) 100%
        );
        border-radius: 32px 32px 32px 32px;

        .form_left {
          padding: 48px 32px 32px;
          width: 730px;
          border-right: 1px dashed #c9d7fb;

          .label {
            width: 77px;
            text-align: right;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #2e343e;
            margin-right: 8px;
            max-height: 42px;

            span {
              color: #f97a3f;
            }
          }

          input {
            padding: 0 16px;
            width: 580px;
            height: 40px;
            border: 1px solid #e4e9f3;
          }

          .problem {
            outline-color: transparent;
            font-family: Arial, Arial;
            font-size: 14px;
            width: 580px;
            height: 126px;
            border: none;
            padding: 8px 16px;
          }

          .submitbtn {
            width: 184px;
            height: 42px;
            background: #0078ff;
            border-radius: 8px 8px 8px 8px;
            font-family: Arial, Arial;
            font-weight: bold;
            font-size: 18px;
            color: #ffffff;
            line-height: 18px;
          }
        }

        .form_right {
          padding: 48px 40px 0;

          .form_title {
            font-weight: bold;
            font-size: 24px;
            color: #2e343e;
          }

          .form_txt {
            font-size: 16px;
            color: #2e343e;
          }
        }
      }
    }
  }
}
</style>